<!DOCTYPE html>
<html lang="en">
	<title>地图选择</title>
	<head>
	    <meta charset="UTF-8">
		<script src="js/jquery-1.12.0.min.js"></script>
	    <style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			.bg{
				height: 100%;
				width: 100%;
				background-image: url("imgs/login_bg.jpg");
				background-position: center;
				background-size: cover;
			}
			.back{
				position: absolute;
				right: 30px;
				top: 30px;
				height: 95px;
				width: 95px;
				background: url(imgs/map/back.png) no-repeat center;
				cursor: pointer;
			}
			.bannerbox{
				height: 500px;
				width: 800px;
				position: absolute;
				left: calc(50% - 400px);
				top: 10%;
				/*border: solid 1px;*/
			}
			@keyframes bleft{
				from {width: 500px;height: 300px;left:170px;top:100px;z-index: 10}
				to {width: 300px;height: 200px;left:100px;top:150px;z-index: 9}
			}
			@keyframes bright{
				from {width: 500px;height: 300px;left:170px;top:100px;z-index: 10}
				to {width: 300px;height: 200px;left:420px;top:150px;z-index: 9}
			}
			@keyframes sleft{
				from {width: 300px;height: 200px;left:420px;top:150px;z-index: 9}
				to {width: 500px;height: 300px;left:170px;top:100px;z-index: 10}
			}
			@keyframes sright{
				from {width: 300px;height: 200px;left:100px;top:150px;z-index: 9}
				to {width: 500px;height: 300px;left:170px;top:100px;z-index: 10}
			}
		</style>
	</head>
	<body>
		<!--<div id="bg">-->
			<!--<div id="back"></div>-->
			<!--<div id="bannerbox"></div>-->
		<!--</div>-->
	</body>
</html>
<script>
	$(function(){
		var banner = new Banner($("body"));
	});
	function Banner($parent){
		var $bg = $("<div class='bg'></div>");
		$bg.appendTo($parent);
		var $back = $("<div class='back'></div>");
		$back.appendTo($bg);
		var $bannerbox = $("<div class='bannerbox'></div>");
		$bannerbox.appendTo($bg);

		//显示规则
		var nowid = 0;
		picshow(0);
		//中间显示部分
		function reset(){
			//clear
			$bannerbox.html("");
			//左右翻页控件

			//左翻页
			$turnleft = $("<div></div>");
			$turnleft.css({
				"width":"47px",
				"height":"135px",
				"background":"url(imgs/map/left1.png) no-repeat center",
				"float":"left",
				"margin-top":"200px",
				"z-index":"100",
				cursor:"pointer"
			});
			$turnleft.appendTo($bannerbox);
			$turnleft.on("click",function(){

				//动画效果
				$("#map"+nowid).css({"animation":"bleft 0.3s"});
				$("#map"+(nowid+1)).css({"animation":"sleft 0.3s"});

				if(nowid == 0){
					nowid = 5;
				}else{
					nowid--;
				}
				picshow(nowid);
				
			});
			//右翻页
			$turnright = $("<div></div>");
			$turnright.css({
				"width":"47px",
				"height":"135px",
				"background":"url(imgs/map/left.png) no-repeat center",
				"float":"right",
				"margin-top":"200px",
				"z-index":"100",
				cursor:"pointer"
			});
			$turnright.appendTo($bannerbox);
			$turnright.on("click",function(){
				//动画效果
				$("#map"+nowid).css({"animation":"bright 0.3s"});
				$("#map"+(nowid-1)).css({"animation":"sright 0.3s"});

				if(nowid == 5){
					nowid = 0;
				}else{
					nowid++;
				}
				picshow(nowid);
			});
			//创建图片素材
			for(i=0;i<6;i++){
				$showpic = $("<div></div>");
				$showpic.attr("id","map" + i);
				$showpic.css({
					"width":"300px",
					"height":"200px",
					"background":"url(imgs/map/map" + i + ".png) no-repeat center",
					"background-size":"contain",
					"position":"absolute",
					"display":"none",
					"left": "240px",
    				"top": "120px"
				});
				$showpic.appendTo($bannerbox);
			}
		}
		//显示规则
		function picshow($nowid){
			reset();
			var nowid = $nowid;
			console.log(nowid);
			self.nowleft = nowid - 1;
			self.nowright = nowid + 1;

			if(nowid == 0){
				self.nowleft = 5;
			}
			if(nowid == 5){
				self.nowright = 0;
			}

			$("#map" + nowid).css({
				"width":"500px",
				"height":"300px",
				"display":"block",
				"left":"170px",
				"top":"100px",
				"z-index":"90"
			});
			$("#map" + self.nowleft).css({
				"display":"block",
				"left":"100px",
				"top":"150px"

			});
			$("#map" + self.nowright).css({
				"display":"block",
				"left":"420px",
				"top":"150px"
			});
		}
	}
</script>